<template>
  <el-descriptions
      :column="2"
      border
      size="small"
      class="mt-4"
  >
    <el-descriptions-item label="题集名称" :span="6">
      <el-input v-model="ruleForm.collectTitle"/>
    </el-descriptions-item>

    <el-descriptions-item label="题库类别" :span="6">
      <el-select v-model="ruleForm.collectTypeId"
                 placeholder="请选择题集类型"
                 @change="dataChange"
      >
        <el-option
            v-for="item in depressTypesList"
            :key="item.id"
            :label="item.typeName"
            :value="item.id"
        />
      </el-select> &nbsp;&nbsp;
      <el-button type="primary" @click="openCollectType">新增</el-button>
    </el-descriptions-item>

    <el-descriptions-item label="题集描述" :span="6">
      <el-input v-model="ruleForm.collectDesc" type="textarea" rows="6"/>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";
import {DepressCollect} from '@/apis/model/depress/DepressCollectModel';
import {insertDepressCollect, updateDepressCollect} from '@/apis/http/depress/DepressCollectHttp';
import {DepressCollectType} from "@/apis/model/depress/DepressCollectTypeModel";
import {depressCollectTypePage, insertDepressCollectType} from "@/apis/http/depress/DepressCollectTypeHttp";
import {Result} from "@/apis/model/common/common.interfaces";

interface Prop {
  ruleForm: DepressCollect,
  addDataType: string
}

// 刷新list页面
const refushList = ref(false);

// 题库类别
const depressTypesList = ref([] as Array<DepressCollectType>)

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  id: [
    {required: true, message: '请输入', trigger: 'blur'}
  ],
  collectTitle: [
    {required: true, message: '请输入题集题目', trigger: 'blur'}
  ],
  collectDesc: [
    {required: true, message: '请输入题集描述', trigger: 'blur'}
  ],
  statusFlag: [
    {required: true, message: '请输入状态 0-停用 1-启用 2-备用', trigger: 'blur'}
  ],
  delFlag: [
    {required: true, message: '请输入是否删除 0-否 1-是', trigger: 'blur'}
  ],
  createUser: [
    {required: true, message: '请输入创建人', trigger: 'blur'}
  ],
  createTime: [
    {required: true, message: '请输入创建时间', trigger: 'blur'}
  ],
  updateTime: [
    {required: true, message: '请输入修改时间', trigger: 'blur'}
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
})

// 初始化题集信息
const initDepressCollectTypesList = () => {
  depressCollectTypePage({current: 1, size: 10, entity: {statusFlag: 1, delFlag: 0}})
  .then((res: Result) =>{
    console.log(res);
    depressTypesList.value = res.data.list;
  })
}

const openCollectType = () => {
  ElMessageBox.prompt('请输入题集类别', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(({ value }) => {
      insertDepressCollectType({
        typeName: value,
        statusFlag: 1,
        delFlag: 0,
      } as DepressCollectType).then(res =>{
        ElMessage({
          type: 'success',
          message: `题集题集类型成功！`,
        });
        initDepressCollectTypesList();
      })

      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Input canceled',
        // })
      })
}


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertDepressCollect(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateDepressCollect(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }

    } else {
      ElMessage.error('请完善信息！')
    }
  })
}

onMounted(() =>{
  initDepressCollectTypesList();
})

</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
